<template>
  <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item v-for="(item, index) in menus" :key="index">
        <template slot="title">
          <div class="xzx">
            <div v-if="index == '0'">
              <i class="el-icon-user"></i>
            </div>
            <div v-if="index == '1'">
              <i class="el-icon-folder"></i>
            </div>
            <div v-if="index == '2'">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
            <div v-if="index == '3'">
              <i class="el-icon-s-order"></i>
            </div>
            <div v-if="index == '4'">
              <i class="el-icon-message"></i>
            </div>

            <span>{{ item }}</span>
          </div>
        </template>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航二</span>
        </template>
        <!-- <el-menu-item-group>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
          <el-menu-item index="1-4-1">选项1</el-menu-item> -->
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: '',
  props:{},
  data () {
    return {
      menus:["首页","员工管理","课程管理","讲师管理","直播管理","订单管理","App管理","商品管理","报表管理"]
    }
  },
  components: {},
  methods: {
     handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
  },
  mounted() {},
  computed: {},
  watch: {}
}
</script>

<style lang='scss' scoped>
</style>